Feeds

A feed consists of a list of recurring elements of similar types. Examples of a feed would be a discussion or activity timeline.

Commentdev ready

Preview

Code

<div class="slds-media slds-comment slds-hint-parent">
  <div class="slds-media__figure">
    <div class="slds-avatar slds-avatar--circle slds-avatar--medium">
      <a href="#void" title="Jason Rodgers">
        <img src="/assets/images/avatar1.jpg" alt="Jason Rodgers" />
      </a>
    </div>
  </div>
  <div class="slds-media__body">
    <div class="slds-grid slds-grid--align-spread slds-has-flexi-truncate">
      <p class="slds-truncate"><a href="#void" title="Design Systems">Design Systems</a> - <a href="#void" title="Jason Rodgers">Jason Rogers</a></p>
      <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small slds-shrink-none">
        <svg aria-hidden="true" class="slds-button__icon slds-button__icon--hint slds-button__icon--small">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
        </svg>
        <span class="slds-assistive-text">Show More</span>
      </button>
    </div>
    <p class="slds-text-body--small"><a href="#void" title="Click for single-item view of this post">18hr Ago</a></p>
    <div class="slds-comment__content slds-text-longform">
      <p>Here&#x27;s the latest demo presentation <a href="#void" title="Jenna Davis">@Jenna Davis</a>, let me know if there are any changes. I&#x27;ve updated slides 3-8 and slides 16-18 slides with new product shots.</p>
    </div>
    <div class="slds-tags slds-text-body--small slds-p-bottom--x-small">
      <span>Topics:</span>
      <ul class="slds-tags__list">
        <li class="slds-tags__item"><a href="#void" title="Powerpoint">Powerpoint</a></li>
        <li class="slds-tags__item"><a href="#void" title="Sales Presentation">Sales Presentation</a></li>
        <li class="slds-tags__item"><a href="#void" title="Todo">Todo</a></li>
        <li class="slds-tags__item">and <a href="#void" title="Show the remaining topics">3 more</a></li>
      </ul>
    </div>
    <ul class="slds-list--horizontal slds-has-dividers--right slds-text-body--small">
      <li class="slds-list__item">
        <a href="#void" title="Like this item">
          <button class="slds-button slds-button--icon-border slds-button--icon-small slds-m-right--small">
            <svg aria-hidden="true" class="slds-button__icon">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#like"></use>
            </svg>
            <span class="slds-assistive-text">Like</span>
          </button>Like</a>
      </li>
      <li class="slds-list__item">21 Likes</li>
    </ul>
  </div>
</div>

To initialize the comment, apply the .slds-comment class to a containing <div>. A comment that is associated to a user, should be wrapped within a .slds-media object. This layout helper will properly align the avatar and body of the comment.

A minimal comment is a variation of comment base. The markup structure and classes are identical, it just removes tertiary content from the comment.

If a comment thread exceeds 3 replies, those comments should be hidden on page load and replaced with a call to action that explains the amount of comments that are hidden. If the user interacts with the overflow button, the button should be removed and replaced with the hidden comment <li>.

If the overflow state is active, it is best practice to show the latest comment and the comment publisher.

If a comment has replies, below the primary comment .slds-comment should get a <ul> with the class .slds-comment__replies. The <li> within the <ul> will then get the comment minimal variant.

Discussion Feeddev ready

Preview

Code

<div class="slds-feed">
  <ul class="slds-feed__list">
    <li class="slds-feed__item">
      <div class="slds-media slds-comment slds-hint-parent">
        <div class="slds-media__figure">
          <div class="slds-avatar slds-avatar--circle slds-avatar--medium">
            <a href="#void" title="Jason Rodgers">
              <img src="/assets/images/avatar1.jpg" alt="Jason Rodgers" />
            </a>
          </div>
        </div>
        <div class="slds-media__body">
          <div class="slds-grid slds-grid--align-spread slds-has-flexi-truncate">
            <p class="slds-truncate"><a href="#void" title="Design Systems">Design Systems</a> - <a href="#void" title="Jason Rodgers">Jason Rogers</a></p>
            <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small slds-shrink-none">
              <svg aria-hidden="true" class="slds-button__icon slds-button__icon--hint slds-button__icon--small">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
              </svg>
              <span class="slds-assistive-text">Show More</span>
            </button>
          </div>
          <p class="slds-text-body--small"><a href="#void" title="Click for single-item view of this post">18hr Ago</a></p>
          <div class="slds-comment__content slds-text-longform">
            <p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
          </div>
          <ul class="slds-list--horizontal slds-has-dividers--right slds-text-body--small">
            <li class="slds-list__item">
              <a href="#void" title="Like this item">
                <button class="slds-button slds-button--icon-border slds-button--icon-small slds-m-right--small">
                  <svg aria-hidden="true" class="slds-button__icon">
                    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#like"></use>
                  </svg>
                  <span class="slds-assistive-text">Like</span>
                </button>Like</a>
            </li>
            <li class="slds-list__item">21 Likes</li>
          </ul>
        </div>
      </div>
    </li>
    <li class="slds-feed__item">
      <div class="slds-media slds-comment slds-hint-parent">
        <div class="slds-media__figure">
          <div class="slds-avatar slds-avatar--circle slds-avatar--medium">
            <a href="#void" title="Jason Rodgers">
              <img src="/assets/images/avatar1.jpg" alt="Jason Rodgers" />
            </a>
          </div>
        </div>
        <div class="slds-media__body">
          <div class="slds-grid slds-grid--align-spread slds-has-flexi-truncate">
            <p class="slds-truncate"><a href="#void" title="Design Systems">Design Systems</a> - <a href="#void" title="Jason Rodgers">Jason Rogers</a></p>
            <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small slds-shrink-none">
              <svg aria-hidden="true" class="slds-button__icon slds-button__icon--hint slds-button__icon--small">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
              </svg>
              <span class="slds-assistive-text">Show More</span>
            </button>
          </div>
          <p class="slds-text-body--small"><a href="#void" title="Click for single-item view of this post">18hr Ago</a></p>
          <div class="slds-comment__content slds-text-longform">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
          <ul class="slds-list--horizontal slds-has-dividers--right slds-text-body--small">
            <li class="slds-list__item">
              <a href="#void" title="Like this item">
                <button class="slds-button slds-button--icon-border slds-button--icon-small slds-m-right--small">
                  <svg aria-hidden="true" class="slds-button__icon">
                    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#like"></use>
                  </svg>
                  <span class="slds-assistive-text">Like</span>
                </button>Like</a>
            </li>
            <li class="slds-list__item">456 Likes</li>
          </ul>
        </div>
      </div>
    </li>
    <li class="slds-feed__item">
      <div class="slds-media slds-comment slds-hint-parent">
        <div class="slds-media__figure">
          <div class="slds-avatar slds-avatar--circle slds-avatar--medium">
            <a href="#void" title="Jason Rodgers">
              <img src="/assets/images/avatar1.jpg" alt="Jason Rodgers" />
            </a>
          </div>
        </div>
        <div class="slds-media__body">
          <div class="slds-grid slds-grid--align-spread slds-has-flexi-truncate">
            <p class="slds-truncate"><a href="#void" title="Design Systems">Design Systems</a> - <a href="#void" title="Jason Rodgers">Jason Rogers</a></p>
            <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small slds-shrink-none">
              <svg aria-hidden="true" class="slds-button__icon slds-button__icon--hint slds-button__icon--small">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
              </svg>
              <span class="slds-assistive-text">Show More</span>
            </button>
          </div>
          <p class="slds-text-body--small"><a href="#void" title="Click for single-item view of this post">18hr Ago</a></p>
          <div class="slds-comment__content slds-text-longform">
            <p>Nullam quis risus eget urna mollis ornare vel eu leo.</p>
          </div>
          <ul class="slds-list--horizontal slds-has-dividers--right slds-text-body--small">
            <li class="slds-list__item">
              <a href="#void" title="Like this item">
                <button class="slds-button slds-button--icon-border slds-button--icon-small slds-m-right--small">
                  <svg aria-hidden="true" class="slds-button__icon">
                    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#like"></use>
                  </svg>
                  <span class="slds-assistive-text">Like</span>
                </button>Like</a>
            </li>
            <li class="slds-list__item">62 Likes</li>
          </ul>
        </div>
      </div>
    </li>
  </ul>
</div>

A discussion feed consists of comments and variants of comments. A .slds-feed__item contains a comment, that feed item can then consume added functionality of that comment, such as reply threading, comment overflow collapsing and comment publishing.

Component Overview

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-feed
Applied to:

<div>

Outcome:

Initializes feed

Required:

Required

Comments:

--

.slds-feed__list
Applied to:

<ul>

Outcome:

Initializes feed list

Required:

Required

Comments:

--

.slds-feed__item
Applied to:

<li>

Outcome:

Initializes feed list item

Required:

Required

Comments:

Applies padding and border separator

.slds-comment
Applied to:

<div>

Outcome:

Initializes comment

Required:

Required

Comments:

--

.slds-comment__content
Applied to:

<div>

Outcome:

Comment content goes in this element

Required:

Required

Comments:

.slds-comment__content needs the .slds-text-longform utility

.slds-comment__replies
Applied to:

<ul>

Outcome:

List of children comments

Required:

Required

Comments:

--

.slds-tags
Applied to:

<div>

Outcome:

Container for comment "tags" or "topics"

Required:

No, optional element or modifier

Comments:

Required if comment has "tags" or "topics" associated

.slds-tags__list
Applied to:

<ul>

Outcome:

List for comment "tags" or "topics"

Required:

Required

Comments:

--

.slds-tags__item
Applied to:

<li>

Outcome:

Individual "tag" or "topic" item

Required:

Required

Comments:

--

.slds-attachments
Applied to:

<div>

Outcome:

Container for attachments to a comment

Required:

Required

Comments:

--

.slds-attachments__item
Applied to:

<div>

Outcome:

Individual attachment, can be more than one

Required:

Required

Comments:

--